
<template>
  <view>
    <view class="banner-logo">
      <image src="@/static/image/logo.png" class="w-full"></image>
    </view>
    <view class="px-8 mt-3">
      <view class="text-center text-xl">商户管理后台</view>
      <view class="mt-8 h-12 flex items-center px-6 bg-white rounded-3xl">
        <image src="@/static/image/phone.png" class="w-5 h-5"></image>
        <input type="number" placeholder="请输入手机号码" class="px-4 h-8 w-full" v-model="loginParams.phone"/>
      </view>

      <view class="mt-6 h-12 flex items-center px-6 bg-white rounded-3xl">
        <image src="@/static/image/psd.png" class="w-5 h-5"></image>

        <input :password="psdFlag"  placeholder="请输入密码" class="uni-input px-4 h-8 w-4 flex-1" v-model="loginParams.password" />
        <!--</form>-->

        <view class="w-10 h-full flex items-center justify-center" @click="togglePsd">
          <image src="@/static/image/noeye.png" class="w-6 h-4" v-if="psdFlag"></image>
          <image src="@/static/image/eye.png" class="w-6 h-4" v-else></image>
        </view>
      </view>

      <view class="mt-9 h-12 flex items-center justify-center text-center rounded-3xl bg-indigo-500 text-white" @click="handleLogin" v-if="isLoginClick">
        登 录
      </view>

      <view class="mt-9 h-12 flex items-center justify-center text-center rounded-3xl bg-indigo-200 text-white" v-else>
        登 录
      </view>

      <view class="mt-8 text-center text-gray-400 text-sm">
        <text @click="jumpForgot">修改密码</text>
      </view>
      <!--<view class="mt-1 text-center text-blue-500 text-base">-->
      <!--  <text>激活账号</text>-->
      <!--</view>-->

    </view>
  </view>
</template>

<script setup lang="ts">
  import { uiwu } from "@/api/interface/interface"
  import { userStore } from '@/store/userStore'
  import { footerStore } from '@/store/footerStore'
  import { configStore } from "@/store/configStore";
  import { loginApi } from '@/api/account/index'
  import { throttle } from '@/api/common'
  import type { LoginParamsItf } from '@/api/account/type'
  import { ref, reactive, computed } from 'vue'

  const psdFlag = ref<boolean>(true)
  const togglePsd = () => {
    psdFlag.value = !psdFlag.value
  }

  const isLoginClick = computed(() => {
    if( loginParams.phone && loginParams.password ) return true
  })

  const loginParams:LoginParamsItf = reactive({
    phone: '',
    password: ''
  })

  const config = configStore()
  /** 登录 **/
  const tabBar = footerStore()
  const handleLogin = throttle(async () => {
    const res = await loginApi( loginParams )
    // console.log('res===', res)
    if(res) {
      const { token, userInfo } = res.data
      uni.setStorageSync('token', token)
      userStore().setUserInfo(userInfo)
      tabBar.setCurrent(0)
      await config.initInfoData()

      uiwu.toast('登录成功')
      setTimeout(() => {
        uni.switchTab({ url: '/pages/home/index' })
      },2000)

    }
  },3000)

  const jumpForgot = () => {
    uni.navigateTo({ url: '/pages/account/pwdforgot' })
  }

</script>

<style scoped lang="scss">
page {
  min-height: 100vh;
  background: #f5f5f5;
}

image {
  display: block;
}

.password {
  ::v-deep(.uni-input-input) {
    -webkit-text-security: disc;
    text-security:disc;
  }
}
</style>
